<template>
	<div class="server">
		
			
				<van-row v-for="item in list" :key="item.id">
					<van-col span="6">
					【{{item.name}}】
					</van-col>
					<van-col span="10" v-for='p in limitList(item.child)' :key="p.id" class="van-ellipsis" @click="todetail(p)">
						{{p.title}}
					</van-col>
					
					
				</van-row>
				
		
	</div>

</template>

<script>
	import online from "@/assets/img/online.png"
	import zixun from "@/assets/img/zixun.png"
	export default {
		name: "Interaction",
		components: {

		},
		data() {
			return {
				active: 0,
				online: online,
				zixun:zixun,
				list:[]
			}
		},
		methods:{
			todetail(item){
				this.$router.push({name:'articledetail',query:{id:item.id}})
			},
			getList(item){
				this.$api.home.nav({type:1,pid:item.id}).then(res => {
					// 执行某些操作
					if (res.code == 1) {
						this.list = res.data
						this.getArticle()
					}
				
				})
			},
			getArticle(){
				let that = this
				this.list.forEach(item=>{
					that.$api.home.articleList({category_id:item.url,limit:10,page:1}).then(res => {
						// 执行某些操作
						if (res.code == 1) {
							that.$set(item,"child",res.data.data)
						}
					
					})
				})
				
			},
			limitList(data){
				if(data){
					return data.slice(0,1)
				}
				else{
					return []
				}
				
			}
		}


	}
</script>

<style scoped lang="less">
	.server {
		width: 95%;
		// height:8.56rem;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rem 0rem 0rem 0rem rgba(206, 206, 206, 0.29);
		border-radius: 0.2rem;
		margin: 0.5rem auto;
		padding: 0.88rem 0.78rem;
	}
</style>
<style lang="less">
	.server {
		.van-ellipsis {
			font-size: 0.81rem;
			font-family: PingFang SC;
			font-weight: 500;
		}
		
		.van-col--10{
			font-size:0.75rem;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(89,89,89,1);
			
			
		}
		.van-col--4,.van-col--6{
			font-size:0.81rem;
			font-family:PingFang SC;
			font-weight:500;
			color:#FF6B14;
			
			
		}
		.van-row{
			margin-bottom: 1.63rem;
			&:last-child{
				margin-bottom:0;
			}
		}
	}
</style>
